﻿@{
    ViewData["Title"] = "Home Page";
}


<div id="app"></div>


<template id="app-template">
 
    <el-button v-reclick="20000" type="primary" @@click="increment">按钮</el-button>
    <h1>Count:{{count}}</h1>

    <div :style="{ fontSize: postFontSize + 'em' }">
        <vant-my-button v-for="post  in posts" :key="post.id" :title="post.title" @@enlarge-text="postFontSizeFunc">
            <p>{{post.title}}</p>
        </vant-my-button>
    </div>
@*     <ButtonCounter /> *@
    <quill-editor></quill-editor>
</template>



<script type="text/javascript">
    // const promise = new Promise((resolve, reject) => {
    //     // 异步操作
    //     setTimeout(() => {
    //         if (Math.random() < 0.5) {
    //             resolve('success');
    //         } else {
    //             reject('error');
    //         }
    //     }, 1000);
    // });

    // promise.then(result => {
    //     console.log(result);
    // }).catch(error => {
    //     console.log(error);
    // });
    // function print(delay, message) {
    //     return new Promise(function (resolve, reject) {
    //         setTimeout(function () {
    //             console.log(message);
    //             resolve();
    //         }, delay);
    //     });
    // }

    // print(1000, "First").then(function () {
    //     return print(4000, "Second");
    // }).then(function () {
    //     print(3000, "Third");
    // });
</script>

<script type="module">

    import reclick from '../../js/reclick.js';
    import ButtonCounter from "../../js/components/ButtonCounter.js";
    import Editor from "../../js/components/EditorCompnents.js";
    const app = Vue.createApp({
        // components: {
        //     buttoncounter
        // },
        data() {
            return {
                count: 0,
                posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' }
                ],
                postFontSize: 1
            }
        },
        methods: {
            increment() {
                this.count++
            },
            postFontSizeFunc() {
                this.postFontSize += 0.1
            }
        },
        template: '#app-template'
    })
    app.use(ElementPlus)
    app.use(vant)
    app.use(vant.Lazyload)
   // app.use(Quill)

    //自定义组件
    app.component('vant-my-button', ButtonCounter)
    app.component('quill-editor', Editor)
    // 调用工具函数，弹出一个 Toast
    // vant.showToast('提示');
    // app.directive('focus', {
    //     mounted: (el, binding, vnode, prevNode) => {
    //         el.addEventListener('click', e => {
    //             if (!el.disabled) {
    //                 el.disabled = true;
    //                 el.style.cursor = 'not-allowed';
    //                 el.classList.add('is-disabled');
    //                 setTimeout(() => {
    //                     el.disabled = false;
    //                     el.style.cursor = 'pointer';
    //                     el.classList.remove('is-disabled');
    //                 }, binding.value || 1000);
    //             }
    //         });
    //     }
    // }); //自定义指令

    app.directive('reclick', reclick
    ); //自定义指令
    app.mount('#app')
</script>

<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 180px;
        min-height: 400px;
    }
</style>
